<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<meta name="decorator" content="sysDefault" />
<script src="${staticPath}/lib/jquery-datatables/1.9.4/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="${staticPath}/lib/ztree/3.5/js/jquery.ztree.all-3.5.js" type="text/javascript"></script>
<link rel="stylesheet" href="${staticPath}/lib/ztree/3.5/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript">
<!--
var setting = {
	async: {
		enable: true,
		url: getUrl
	},
	check: {
		enable: true
	},
	data: {
		simpleData: {
			enable: true
		}
	},
	view: {
		expandSpeed: ""
	},
	callback: {
		beforeExpand: beforeExpand,
		onAsyncSuccess: onAsyncSuccess,
		onAsyncError: onAsyncError
	}
};

var zNodes =[
	{name:"节点1", id:"1", times:1, isParent:true},
	{name:"节点2", id:"2", times:1, isParent:true},
	{name:"节点3", id:"3", times:1, isParent:true}
];

var log, className = "dark",
startTime = 0, endTime = 0, perCount = 100, perTime = 100;
function getUrl(treeId, treeNode) {
	return "${contextPath}/biz/example/tree/json";
}
function beforeExpand(treeId, treeNode) {
	if (!treeNode.isAjaxing) {
		startTime = new Date();
		treeNode.times = 1;
		ajaxGetNodes(treeNode, "refresh");
		return true;
	} else {
		alert("zTree 正在下载数据中，请稍后展开节点。。。");
		return false;
	}
}
function onAsyncSuccess(event, treeId, treeNode, msg) {
	if (!msg || msg.length == 0) {
		return;
	}
	var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
	totalCount = treeNode.count;
	if (treeNode.children.length < totalCount) {
		setTimeout(function() {ajaxGetNodes(treeNode);}, perTime);
	} else {
		treeNode.icon = "";
		zTree.updateNode(treeNode);
		zTree.selectNode(treeNode.children[0]);
		endTime = new Date();
		var usedTime = (endTime.getTime() - startTime.getTime())/1000;
		className = (className === "dark" ? "":"dark");
		showLog("[ "+getTime()+" ]&nbsp;&nbsp;treeNode:" + treeNode.name );
		showLog("加载完毕，共进行 "+ (treeNode.times-1) +" 次异步加载, 耗时："+ usedTime + " 秒");
	}
}
function onAsyncError(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	alert("异步获取数据出现异常。");
	treeNode.icon = "";
	zTree.updateNode(treeNode);
}
function ajaxGetNodes(treeNode, reloadType) {
	var zTree = $.fn.zTree.getZTreeObj("treeDemo");
	if (reloadType == "refresh") {
		treeNode.icon = "${staticPath}/lib/ztree/3.5/css/zTreeStyle/img/loading.gif";
		zTree.updateNode(treeNode);
	}
	zTree.reAsyncChildNodes(treeNode, reloadType, true);
}
function showLog(str) {
	if (!log) log = $("#log");
	log.append("<li class='"+className+"'>"+str+"</li>");
	if(log.children("li").length > 4) {
		log.get(0).removeChild(log.children("li")[0]);
	}
}
function getTime() {
	var now= new Date(),
	h=now.getHours(),
	m=now.getMinutes(),
	s=now.getSeconds(),
	ms=now.getMilliseconds();
	return (h+":"+m+":"+s+ " " +ms);
}

$(document).ready(function(){
	$.fn.zTree.init($("#treeDemo"), setting, zNodes);

});
//-->
</script>
</head>
<body>
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
				<div class="panel panel-default">
				  <div class="panel-heading">
				    <h3 class="panel-title">
				    	树
				    </h3>
				  </div>
				  <ul id="treeDemo" class="ztree"></ul>
				</div>			
			</div>
		</div>
	</div>
</body>
</html>